<template>
  <!-- 摄像机档案 -->
  <div v-if="isLoaded" class="dialog-wrap">
    <h1 class="oil-tit-font">摄像机档案</h1>
    <div class="oil-wrap-draw">
      <div class="oil-chart-wrap" />
      <div class="oil-info-font">
        <section class="dis-spa oil-column">
          <p>
            <span>摄像机编号：</span>
            <span>{{ cameraInfo.deviceNumber }}</span>
          </p>
          <p>
            <span>摄像机名称：</span>
            <span>{{ cameraInfo.deviceName }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>规格型号：</span>
            <span>{{ cameraInfo.specificationType }}</span>
          </p>
          <p>
            <span>技术状态：</span>
            <span>{{ cameraInfo.technicalStatus }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>所属单位：</span>
            <span>{{ cameraInfo.subordinateUnit }}</span>
          </p>
          <p>
            <span>生产厂家：</span>
            <span>{{ cameraInfo.manufacturer }}</span>
          </p>
        </section>
        <section>
          <p>
            <span>生产日期：</span>
            <span>{{ cameraInfo.manufactureDate }}</span>
          </p>
        </section>
        <section>
          <p>
            <span>备注：</span>
            <span>{{ cameraInfo.remark }}</span>
          </p>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CameraInfo',
  // eslint-disable-next-line vue/require-prop-types
  props: ['componentdata'],
  data() {
    return {
      cameraInfo: {},
      isLoaded: false
    }
  },
  created() {
    this.cameraInfo = this.componentdata
    this.isLoaded = true
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
@import "@/styles/variables.scss";
.oil-chart-wrap {
  height: 400px;
  width: 100%;
  background: red;
}
</style>
